<!-- 个人中心 -->
<template>
	<view class="content">
		<image src="/static/nice_bg.png" style="height: 230px;position: absolute;left: 0;top: 0;width: 100%;"></image>
		<view class="content" style="z-index: 10;">
			<!-- navbar -->
			<view
				:style="{'height':'44px','padding-top':statusbarHeight+'px','display': 'flex','align-items': 'center','justify-content': 'center'}">
				<text style=" text-align: center;font-size: 16px;font-weight: bold;">我的信息</text>
			</view>

			<!-- body -->
			<view class="content">
				<!-- info panel -->
				<view
					style="margin: 0 15px;background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 3px 6px 1px #2456E017;"
					@click="infoClickHandle">
					<!-- baseinfo -->
					<view style="display: flex;flex-direction: row;position: relative;">
						<!-- avatar -->
						<view
							style="display: flex;width: 68px;height: 68px;border: 2px solid #90B6FF;border-radius: 34px;overflow: hidden;">
							<image :src="avatar" style="width: 68px;height: 68px;" />
						</view>
						<!-- usertag -->
						<image v-if="ismaster" src="/static/user_auth.png"
							style="width: 17px;height: 17px;position: absolute;left: 0px;bottom: 12px;"
							mode="aspectFit"></image>

						<view style="flex: 1;background-color: #ffffff;padding-left: 20px;">
							<text style="font-size: 22px;">{{userName}}</text>
							<text style="font-size: 12px;color: #999999;margin-left: 12px;" v-if="roleType">（{{roleType}}）</text>
							<view style="display: flex;flex-direction: row;">
								<!-- tag -->
								<view v-if="ismaster" style="font-size: 12px;margin-top: 12px;">{{roleType}}</view>
								<view v-else
									style="margin-top: 12px;position: relative;display: flex;align-items: center;min-width: 85px;">
									<image src="/static/mine_tag.png"
										style="width: 100%;height: 21px;position: absolute;left: 0;top: 0;"
										mode="aspectFill"></image>
									<text
										style="position: relative;font-size: 7px;color: white;z-index: 20;margin-right: 16px;margin-left: 8px;">V4</text>
									<text
										style="position: relative;font-size: 12px;color: #70B9FF;z-index: 20;margin-right: 12px;">白金会员</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 箭头 -->
					<view style="display: flex;flex-direction: row-reverse;padding: 12px 0;">
						<image src="/static/arrow-cell-right.png" style="width: 15px;height: 15px;" mode="aspectFit">
						</image>
						<image src="/static/qrcode.png" style="width: 15px;height: 15px;margin-right: 20px;"
							mode="aspectFit" v-if="ismaster" @click.native.stop="showQrcode"></image>
					</view>

					<!-- 数据面板 -->
					<view style="display: flex;flex-direction: row;flex: 1;" v-if="ismaster">
						<!-- item -->
						<view style="flex: 1;display: flex;flex-direction: column;padding-left: 15px;"
							v-for="(obj,idx) in masterDataList" :key="idx"  @click="cellHandle(obj.url)">
							<view class="">
								<text style="font-size: 28px;">{{obj.num}}</text>
								<text style="font-size: 11px;">{{obj.per}}</text>
							</view>
							<view style="margin-top: 5px;">
								<view style="display: flex;flex-direction: row;">
									<view style="display: flex;align-items: center;flex-direction: column;">
										<text style="font-size: 12px;">{{obj.title}}</text>
										<text style="font-size: 10px;color: #999999">{{obj.status}}</text>
									</view>
									<image src="/static/arrow-small-right.png"
										style="width: 10px;height: 10px;margin-left: 5px;margin-top: 5px;"
										mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<view v-else style="display: flex;flex-direction: row;flex: 1;">
						<view style="flex: 1;display: flex;flex-direction: column;padding-left: 15px;"
							v-for="(obj,idx) in userDataList" :key="idx" @click="cellHandle(obj.url)">
							<view class="">
								<text style="font-size: 28px;">{{obj.num}}</text>
								<text style="font-size: 11px;">{{obj.per}}</text>
							</view>
							<view style="margin-top: 5px;">
								<view style="display: flex;flex-direction: row;">
									<view style="display: flex;align-items: center;flex-direction: column;">
										<text style="font-size: 12px;">{{obj.title}}</text>
										<text style="font-size: 10px;color: #999999">{{obj.status}}</text>
									</view>
									<image src="/static/arrow-small-right.png"
										style="width: 10px;height: 10px;margin-left: 5px;margin-top: 5px;"
										mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- role change -->
				<view
					style="display: flex;flex-direction: row;align-items: center;position: relative;padding: 0 15px;margin-top: 12px;"
					@click="changeRoleHandle">
					<!-- left -->
					<view
						style="height: 38px;flex: 1;background: linear-gradient(to right,#4978f8,#83baf3);border-radius: 8px;overflow: hidden;display: flex;align-items: center;">
						<text
							style="font-size: 14px;color: white;z-index: 20;position: relative;margin-left: 12px;">{{ismaster?'点击转换用户界面':'点击转换师傅界面'}}</text>
					</view>
					<!-- right -->
					<view
						style="width: 104px;height: 45px;position: absolute;display: flex;justify-content: center;align-items: center;right: 15px;">
						<image src="/static/mine-change-btn.png"
							style="width: 104px;height: 100%;position: absolute;left: 0;top: 0;" mode=""></image>
						<text
							style="font-size: 14px;color: white;z-index: 20;position: relative;margin-left: 12px;">{{ismaster?'师傅界面':'用户界面'}}
						</text>
					</view>
				</view>

				<!-- list -->
				<view v-if="ismaster" style="margin: 0 15px;margin-top: 25px;">
					<!-- item -->
					<view v-for="(obj,idx) in masterList" :key="idx" @click="cellHandle(obj.url)">
						<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
							<!-- left -->
							<view style="display: flex;align-items: center;">
								<image :src="obj.icon" style="width: 30px;height: 30px;" mode="aspectFit"></image>
								<text style="margin-left: 12px;font-size: 14px;">{{obj.title}}</text>
							</view>
							<!-- right -->
							<view style="display: flex;align-items: center;">
								<text style="margin-left: 12px;font-size: 14px;color: #666666;"
									v-if="obj.subTitle!=undefined">{{obj.subTitle}}</text>
								<image src="/static/arrow-cell-right.png"
									style="width: 15px;height: 15px;margin-left: 5px;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view style="height: 1px;background-color: #ebebeb;"></view>
					</view>
				</view>
				<view v-else style="margin: 0 15px;margin-top: 25px;">
					<!-- item -->
					<view v-for="(obj,idx) in userList" :key="idx" @click="cellHandle(obj.url)">
						<view style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
							<!-- left -->
							<view style="display: flex;align-items: center;">
								<image :src="obj.icon" style="width: 30px;height: 30px;" mode="aspectFit"></image>
								<text style="margin-left: 12px;font-size: 14px;">{{obj.title}}</text>
							</view>
							<!-- right -->
							<view style="display: flex;align-items: center;">
								<text style="margin-left: 12px;font-size: 14px;color: #666666;"
									v-if="obj.subTitle!=undefined">{{obj.subTitle}}</text>
								<image src="/static/arrow-cell-right.png"
									style="width: 15px;height: 15px;margin-left: 5px;" mode="aspectFit">
								</image>
							</view>
						</view>
						<view style="height: 1px;background-color: #ebebeb;"></view>
					</view>
				</view>
			</view>
		</view>
		<LoginMask :isShowLoginMask="!isLogin" @closeLoginPop="closeLoginPop"/>
		<Tabbar />
	</view>
</template>

<script>
	import { skillOption, selectOption } from '../../api'
	export default {
		data() {
			return {
				isLogin: false,
				statusbarHeight: 20,
				ismaster: false,
				userName: '',
				roleType: '',
				orderCount: 0,
				avatar: '',
				masterDataList: [],
				userDataList: [],
				masterList: [{
					"icon": "/static/icons/icon-time.png",
					"title": "接单类型",
					"url":"/pages/jie_dan_lei_xing/jie_dan_lei_xing",
				}, {
					"icon": "/static/icons/icon-skill.png",
					"title": "我的技能",
					"url":"/pages/myskill/myskill"
				}, {
					"icon": "/static/icons/icon-zs.png",
					"title": "我的证书",
					"url":"/pages/zhengshu/zhengshu",
				}, {
					"icon": "/static/icons/icon-bzj.png",
					"title": "保证金",
					"url":"/pages/baozhengjin/baozhengjin",
				}, ],
				userList: [{
						"icon": "/static/icons/icon-phone.png",
						"title": "手机号",
						"subTitle": "133123456",
						"url": "/pages/phoneCode/phoneCode"
					},
					{
						"icon": "/static/icons/icon-address.png",
						"title": "我的定位",
						"url": "/pages/myLocation/myLocation"
					},
					{
						"icon": "/static/icons/icon-address.png",
						"title": "详细地址",
						"url": "/pages/address/address"
					},
					{
						"icon": "/static/icons/icon-time.png",
						"title": "一键加载模板",
						"url": "/pages/template/template"
					},
					{
						"icon": "/static/icons/icon-time.png",
						"title": "默认时间约定方式",
						"url": "/pages/chooseTimeType/chooseTimeType"
					}
				],
				// current: 4
			}
		},
		mounted() {
			this.statusbarHeight = getApp().globalData.statusBarHeight;
			// this.getUserInfor()
			let storageUserInfo = uni.getStorageSync("userInfo")
			console.log('storageUserInfo--', storageUserInfo, storageUserInfo.avatar, storageUserInfo.userName)
			let {username,avatar,roleType,orderCount,consumeCount,mobile,rateCount,orderTakeCount,earnCount} = storageUserInfo
			
			if(!avatar && !username) {
				this.isLogin = false
			} else {
				this.isLogin = true
				this.userName = username
				this.avatar = avatar || ''
				this.roleType = roleType || ''
				this.userDataList = [
					{
						"num": orderCount || '0',
						"per": "单",
						"title": "发单次数",
						"status": "完成订单"
					}, {
						"num": consumeCount || '0',
						"per": "元",
						"title": "累计消费",
						"status": "我的钱包",
						"url":"/pages/wallet/wallet"
					}, {
						"num": rateCount || '0',
						"per": "条",
						"title": "评价印象",
						"status": "师傅评价"
					}
				]
				this.userList[0].subTitle = mobile
				this.masterDataList = [
					{
						"num": orderTakeCount || '0',
						"per": "次",
						"title": "服务次数",
						"status": "完成订单"
					}, {
						"num": earnCount || '0',
						"per": "元",
						"title": "累计收益",
						"status": "我的钱包",
						"url":"/pages/wallet/wallet"
					}, {
						"num": rateCount || '0',
						"per": "条",
						"title": "评价印象",
						"status": "师傅信息"
					}
				]
			}
		},
		onShow: function() {
			uni.hideTabBar({
				animation: false
			})
		},
		methods: {
			closeLoginPop() {
				this.isLogin = true
				let {username,avatar} = uni.getStorageSync('userInfo')
				this.userName = username
				this.avatar = avatar || ''
			},
			showQrcode(){
				let imgsArray = [];
				let url = uni.getStorageSync('userInfo').bizQrcode
				imgsArray[0] = url;
				// 展示二维码图片
				uni.previewImage({
				   current: 0,
				   urls: imgsArray //必须是网址路径，否则加载不出来，如：http：或https：
			  });
			},
			getUserInfor(){
				let {username,avatar,roleType,orderCount,consumeCount,mobile,rateCount,orderTakeCount,earnCount} = uni.getStorageSync('userInfo')
				this.userName = username
				this.avatar = avatar || ''
				this.roleType = roleType
				this.userDataList = [
					{
						"num": orderCount,
						"per": "单",
						"title": "发单次数",
						"status": "完成订单"
					}, {
						"num": consumeCount,
						"per": "元",
						"title": "累计消费",
						"status": "我的钱包",
						"url":"/pages/wallet/wallet"
					}, {
						"num": rateCount,
						"per": "条",
						"title": "评价印象",
						"status": "师傅评价"
					}
				]
				this.userList[0].subTitle = mobile
				this.masterDataList = [
					{
						"num": orderTakeCount,
						"per": "次",
						"title": "服务次数",
						"status": "完成订单"
					}, {
						"num": earnCount,
						"per": "元",
						"title": "累计收益",
						"status": "我的钱包",
						"url":"/pages/wallet/wallet"
					}, {
						"num": rateCount,
						"per": "条",
						"title": "评价印象",
						"status": "师傅信息"
					}
				]
			},
			changeRoleHandle() {
				this.ismaster = !this.ismaster;
			},
			infoClickHandle(){
				uni.navigateTo({
					url:"/pages/profile/profile"
				})
			},
			cellHandle(url) {
				// event.stopPropagation();
				console.log(url)
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped>

</style>
